<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入Vue -->
    <script src="../../Vue_Origin/vue.js" type="text/javascript"></script> <!-- 开发使用的版本 -->
    <!-- <script src="../../Vue_Origin/vue.min.js" type="text/javascript"></script> // 生产使用的版本 -->

    <title>学习Vue的第一天</title>
</head>

<body>
    <!-- 先输出个内容，看看是否成功 -->
    <!-- <h1>Hello,Vue! 本次成功</h1> -->

    <!-- 开始使用Vue -->
    <div id="app">
        <h1>开始学习Vue，即将输出变量value的值：{{ value }}</h1>
    </div>
    <!--
        拓展：此处的容器#app，被称为【Vue模版】

        其他：
        1、Vue实例和容器是一一对应的；
        2、真实开发中只有一个Vue实例，并且配合组件使用；
        3、 容器中的{{XXXXX}},其XXXXX要写js表达式，且XXXXX可以自动读取Vue实例的属性data中的内容；
        4、 一旦data中的数据发生变化，页面中对应的地方也会自动更新；

     -->
    <div>
        <p style="border: 1px solid #000;"></p>
        <p>结果实例：</p>
        <img src="./../demo1.png" style="border: 2px solid red;border-radius: 10px;">
    </div>

    <script type="text/javascript">
        //关闭vue在启动时生成生产提示
        Vue.config.productionTip = false

        // 创建实例
        new Vue({
            el: '#app',// el用于指定当前的Vue实例作用与那个容器【此处容器为div id=app】，el的值通常选择CSS的选择器字符串。
            data: {
                // data用于存储数据，供el所指定的容器使用。值可以是对象，也可以是函数（后期在了解）
                value: '学习Vue的第一天'
            }
        })
    </script>
</body>

</html>